// 数字字体
@font-face {
  font-family: number;
  src: url('./font/Barlow-Regular.ttf') format('truetype');
}

@font-face {
  font-family: number-bold;
  src: url('./font/Barlow-Bold.ttf') format('truetype');
}

@font-face {
  font-family: number-medium;
  src: url('./font/Barlow-Medium.ttf') format('truetype');
}

// 文字
// UI => 写法: 12/CN-Regular => font-12
// m-font-12
// m-font-12-medium
// m-font-12-bold
$font-size-list: 12, 13, 14, 16, 18, 20, 24, 36, 48, 56;

.m-font {
  font-weight: 400;
}

.m-font-medium {
  font-weight: 500;
}

.m-font-bold {
  font-weight: 600;
}

$font-map:
  400,
  500 'medium',
  600 'bold';

@each $k, $v in $font-map {
  @each $s in $font-size-list {
    @if $v {
      .m-font-#{$s}-#{$v} {
        font-size: var(--font-#{$s});
        font-style: normal;
        font-weight: $k;
        line-height: var(--font-#{$v}-line-height-#{$s});
      }
    } @else {
      .m-font-#{$s} {
        font-size: var(--font-#{$s});
        font-style: normal;
        font-weight: $k;
        line-height: var(--font-line-height-#{$s});
      }
    }
  }
}

.m-number {
  font-family: number, sans-serif;
  font-style: normal;
}

.m-number-medium {
  font-family: number-medium, sans-serif;
  font-style: normal;
}

.m-number-bold {
  font-family: number-bold, sans-serif;
  font-style: normal;
}

// m-number-12
// m-number-12-medium
// m-number-12-bold
$font-number-map:
  'number',
  'number-medium' 'medium',
  'number-bold' 'bold';

@each $k, $v in $font-number-map {
  @each $s in $font-size-list {
    @if $v {
      .m-number-#{$s}-#{$v} {
        font-family: $k, sans-serif;
        font-size: var(--font-#{$s});
        font-style: normal;
        line-height: var(--font-number-#{$v}-line-height-#{$s});
      }
    } @else {
      .m-number-#{$s} {
        font-family: $k, sans-serif;
        font-size: var(--font-#{$s});
        font-style: normal;
        line-height: var(--font-number-line-height-#{$s});
      }
    }
  }
}

// 边距
// m-mr-10: margin-right: 10px;
// m-pb-10: padding-bottom: 10px;
$propMap:
  'm' 'margin',
  'p' 'padding';
$subPropMap:
  'r' 'right',
  'l' 'left',
  't' 'top',
  'b' 'bottom';

@each $k, $v in $propMap {
  @each $sk, $sv in $subPropMap {
    @for $i from 0 through 40 {
      .m-#{$k}#{$sk}-#{$i} {
        #{$v}-#{$sv}: #{$i}px;
      }

      .m-margin-#{$i} {
        margin: #{$i}px;
      }

      .m-padding-#{$i} {
        padding: #{$i}px;
      }
    }
  }
}

// 超出2行省略
.m-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;

  &--1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  &--2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  &--3 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
}

.m-link {
  cursor: pointer;
  &:hover {
    color: var(--brand-6);
  }

  &.is-primary {
    color: var(--brand-6);
    &:hover {
      color: var(--brand-4);
    }
  }
}

// scroll 滚动条部分样式
body,
.m-scroll {
  overflow-y: overlay;

  &::-webkit-scrollbar {
    // 整个滚动条。
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    // 滚动条上的滚动滑块。
    background-color: #ddd;
    border-radius: 99px;
  }

  &::-webkit-scrollbar-thumb:hover {
    // 滚动条上的滚动滑块。
    background-color: rgb(0 0 0 / 50%);
  }
}

// 隐藏滚动条
.m-scroll-hide {
  &::-webkit-scrollbar {
    // 整个滚动条。
    width: 0;
  }
}

// 字体颜色
@for $i from 1 through 7 {
  .m-color-brand-#{$i} {
    color: var(--brand-#{$i});
  }

  .m-color-text-#{$i} {
    color: var(--text-#{$i});
  }

  .m-color-text-2-#{$i} {
    color: var(--text-2-#{$i});
  }

  .m-color-error-#{$i} {
    color: var(--error-#{$i});
  }

  .m-color-warning-#{$i} {
    color: var(--warning-#{$i});
  }
}
